<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加更多</title>
  <style>
    body{padding: 25px; font-family: "Microsoft YaHei UI";}
    .aphoto{margin:  10px;}
    select{width: 90px;min-height: 100px; vertical-align: top;}
  </style>
</head>
<body>
  <button onclick="addPhoto()">添加更多</button>
  <button onclick="delAll()">删除全部</button>
  <article class="photoContainer">
    <div class="aphoto">
      <input type="file" name="myphoto"><button type="button" onclick="delNode(event)">删除</button>
    </div>
  </article>

  <h3>在线选菜</h3>
  <article>
    <select name="dish" id="allDish" multiple></select>
    <select name="sel" id="selectDish" multiple></select>
  </article>
  <!--<small><a href="javascript:void(openwin())"> 使用方法 </a></small>-->
<script>
  function addPhoto() {
    var div = document.createElement('div');
    div.setAttribute('class','aphoto');

    var inputFile = document.createElement('input');
    inputFile.setAttribute('type','file');
    inputFile.setAttribute('name','myphoto');
    var inputBtn = document.createElement('button');
    inputBtn.setAttribute('type','button');
    inputBtn.setAttribute('onclick','delNode(event)');
    inputBtn.innerHTML = '删除';

    div.appendChild(inputFile);
    div.appendChild(inputBtn);
    document.getElementsByClassName('photoContainer')[0].appendChild(div);
  }
  
  function delNode(event) {
    event.target.parentNode.parentNode.removeChild(event.target.parentNode);
  }

  function delAll() {
    var parent = document.getElementsByClassName('photoContainer')[0];
    // parent.innerHTML = '';
    while(parent.children.length > 1){
      parent.removeChild(parent.lastElementChild);
    }
  }

  /**
   * 选菜
   */
  var arr = ['鱼香肉丝','京酱肉丝','宫保鸡丁'];
  var fragment = document.createDocumentFragment();
  for(var i=0;i<arr.length;i++){
    var option = document.createElement('option');
    option.setAttribute('value',i);
    option.innerHTML = arr[i];
    option.setAttribute('ondblclick','chooseDish(this)')
    fragment.appendChild(option);
  }
  document.getElementById('allDish').appendChild(fragment);

  function chooseDish(self) {
    var parent = self.parentNode;
    parent.removeChild(self);
    var add = parent.nextElementSibling || parent.previousElementSibling;
    add.appendChild(self);
  }

</script>
</body>
</html>